import React, { Component } from 'react'
import { withRouter } from "react-router-dom";
import pxPage from '../../root/pxPage';
import { ImagePicker, WingBlank, SegmentedControl, Toast } from 'antd-mobile';
import { getMsg, postDynamic } from '../../redux/actionCreator';
import { connect } from 'react-redux'
import {getdynamic} from '../../redux/actionCreator'

const imgpic={
    objectFit: 'contain'
}
class Publish extends Component {
    constructor(props) {
        super(props)
        const data = []
        this.state = {
            context: '',
            files: data,
            multiple: false,
        }

    }
    onChange = (files, type, index) => {
        console.log(files, type, index);
        this.setState({
            files,
        });
    }
    onSegChange = (e) => {
        const index = e.nativeEvent.selectedSegmentIndex;
        this.setState({
            multiple: index === 1,
        });
    }
    render() {
        const { files } = this.state;
        return (
            <div className="publish" style={{ minHeight: '100vh', display: 'flex', width: '100%' }}>

                <div style={{ backgroundColor: "#080904", minHeight: '100vh', display: 'flex', width: '100%' }}>

                    <div style={{ width: '100%', margin: '0 auto' }}>

                        {/* 紫色的框 */}
                        <div style={{ height: `${pxPage(65)}px`, width: '100%', position: 'fixed', top: '0', backgroundColor: '#33273D' }}>
                            <div style={{ height: `${pxPage(20)}px` }}></div>
                            <i className="iconfont icon-fanhui" style={{ fontSize: '1.7em', position: 'relative', left: '5%' }} onClick={() => this.props.history.goBack()}></i>
                        </div>

                        <div style={{ height: `${pxPage(80)}px` }}></div>

                        {/* 头像和昵称 */}
                        <div style={{ height: `${pxPage(60)}px`, width: '90%', margin: '0 auto' }}>
                            <img style={{ height: '3em', width: '3em', borderRadius: '50%',objectFit: 'cover' }} src={`http://www.h5weixin.club:1025/api/image/${JSON.parse(localStorage.getItem('user')).user_pic}`}></img>
                            <span style={{ position: 'relative', bottom: `${pxPage(15)}px` }}> {JSON.parse(localStorage.getItem('user')).user_name}</span>
                        </div>

                        {/* 为了好看先写死了高度 */}
                        <div style={{ width: '90%', backgroundColor: 'white', margin: '0 auto', borderRadius: `${pxPage(15)}px`,overflow:'hidden' }}>
                            {/* 输入要发表的内容 */}
                            <textarea
                                style={{ color: 'black', borderRadius: `${pxPage(13)}px`, padding: '10px', width: '90%', height: `${pxPage(250)}px` }}
                                placeholder="分享新鲜事~"
                                onChange={(e) => this.setState({ context: e.target.value })}
                                value={this.state.context}
                                ></textarea>
                            <WingBlank style={{ paddingBottom: '10px',objectFit: 'contain' }}>
                                <ImagePicker
                                    style={imgpic}
                                    files={files}
                                    onChange={this.onChange}
                                    onImageClick={(index, fs) => console.log(index, fs)}
                                    selectable={files.length < 9}
                                    multiple={this.state.multiple}
                                    length='3'
                                />
                            </WingBlank>

                        </div>

                        {/* 最下方的确认发表和取消按钮 */}
                        <div style={{ margin: '10px auto', width: '50%', height: `${pxPage(30)}px`, textAlign: 'center' }}>
                            <i className="iconfont icon-duigou" style={{ fontSize: '2.5em', marginRight: `${pxPage(40)}px` }}
                                onClick={() => {
                                    console.log(this.state)
                                    this.props.dispatch(postDynamic(getMsg(this.props).user_id, '标题没用占位符', this.state.context, this.state.files))
                                    // Toast.loading('正在努力发布', 2);
                                    setTimeout(() => this.props.history.goBack(), 3000,Toast.info('发布成功', 1))
                                    this.props.dispatch(getdynamic())
                                }}
                            ></i>
                            <i
                                onClick={() => {
                                    this.setState({
                                        context: '',
                                        files: []
                                    })
                                }}
                                className="iconfont icon-cancel"
                                style={{ fontSize: '2.5em', marginLeft: `${pxPage(40)}px` }}></i>
                        </div>
<div style={{height:'20px'}}></div>
                    </div>
                </div>
                <div style={{ flex: '1' }}></div>
            </div >
        )
    }
}
const mapStateToProps = (state) => (
    {
        login: state.login,
        dynamic: state.dynamic
    }
)

export default withRouter(connect(mapStateToProps)(Publish))
// export default withRouter(Publish)